<html lang="cn" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="/styles.css">
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <title>注册 - 题海</title>
    </head>
    <body>
    <!-- 动态背景 -->
    <div class="background"></div>

    <!-- 注册表单 -->
    <section class="container">
        <h2>欢迎注册<b class="art-text">题海</b></h2>

        <!-- 错误信息 -->
        <div id="error-message" class="error-message" style="display: none;"></div>

        <!-- 注册表单 -->
        <form id="enroll-form" action="/register" method="post">
            <div class="form">
                <input type="text" id="account" name="account" placeholder="账号/手机号" required>
                <input type="password" id="userPwd" name="userPwd" placeholder="密码" required>
                <input type="text" id="userName" name="userName" placeholder="用户名" required>
                <select id="sex" name="sex" required>
                    <option value="" disabled selected>请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="保密">保密</option>
                </select>
                <textarea style="resize: none ;min-height: 10em; overflow-y: hidden"
                          cols="20"
                          id="introduction"
                          name="introduction"
                          placeholder="个人简介（可选）"
                          rows="10"
                          oninput="this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'"
                ></textarea>
                <div class="form-actions">
                    <a href="/login"><button type="submit" class="btn-login">注册</button></a>
                </div>
            </div>
        </form>
    </section>
    </body>
 </html>